import React, { useState, useRef } from 'react'

export default function AddDiscount() {
    const [title, setTitle] = useState("新人券")
    const [type, setType] = useState("3")
    const [state, setState] = useState("off")
    const [edu, setEdu] = useState(["bk"])

    const titleEle = useRef()
    const typeEle = useRef()
    const stateEle1 = useRef()
    const stateEle2 = useRef()
    const eduEle = useRef()

    // count [dism,setDism] = useState({
    //     title:"通用券"
    // })

    const update = () => {
        console.log(titleEle.current.value);
        console.log(typeEle.current.value);
        if (stateEle1.current.checked) {
            console.log(stateEle1.current.value);
        } else {
            console.log(stateEle2.current.value);
        }
        console.log(eduEle.current);
    }
    const checkedBoxEvent = (event) => {
        const element = event.target;
        const checkedStatus = element.checked
        const value = element.value
        if (checkedStatus) {
            edu.push(value)
        } else {
            edu.splice(edu.findIndex(item => item == value), 1)
        }
        console.log(edu);

    }

    return (
        <div style={{ boxShadow: "10px 10px 10px rgba(0,0,0,.5)", width: "700px", padding: "20px" }}>
            <div className='item'>
                <label htmlFor="">优惠券名字：</label>
                <input ref={titleEle} name='title' defaultValue={title} type="text" placeholder="请输入名字" />
            </div>
            <div className='item'>
                <label htmlFor="">优惠券类型：</label>
                <select ref={typeEle} name="receiveType" defaultValue={type}>
                    <option value="1">通用券</option>
                    <option value="2">商品券</option>
                    <option value="3">新人券</option>
                </select>
            </div>
            <div className='item'>
                <span>状态：</span>
                <label htmlFor="" >开启</label>
                <input name='state' ref={stateEle1} value="on" defaultChecked={state == "on" ? true : false} type="radio" />
                <label htmlFor="" >关闭</label>
                <input name='state' ref={stateEle2} value="off" defaultChecked={state == "off" ? true : false} type="radio" />
            </div>
            <div className='item' onChange={checkedBoxEvent}>
                <span>学历：</span>
                <label htmlFor="">本科</label>
                <input type="checkbox" value="bk" ref={eduEle} defaultChecked={edu.includes("bk")} />
                <label htmlFor="">专科</label>
                <input type="checkbox" value="zk" defaultChecked={edu.includes("zk")} />
            </div>
            <div>
                <button onClick={update}>修改</button>
            </div>
        </div>
    )
}
